<template>
  <div class="newCourseContainer">
    <div
      class="dialog animated"
      :class="open? 'fadeIn':'fadeOut'"
      v-show="show"
      :style="{visibility: (visible?'visible':'hidden')}"
    >
      <div class="panel animated" :class="open? 'zoomIn':''">
        <div class="title">
          {{title}}
          <div class="close" @click="cancel()"></div>
        </div>
        <div style="padding:0 0.3rem;">
          <div v-if="isHasCampus">
            <div class="launch_text">已开课校区</div>
            <el-checkbox-group
              class="checkGroup"
              v-model="hasSelectCampusList"
              @change="campusGroupChecked"
            >
              <el-checkbox
                :label="item.campusId"
                v-for="item in selectCampusList"
                :key="item.campusId"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="launch_text">选择开课校区</div>
          <el-input
            v-model="tabledisplayObj.campusName"
            class="search_input"
            placeholder="请输入校区名称"
            @input="searchCampus"
          ></el-input>
          <el-checkbox
            style="float:right;margin-top: 0.24rem;"
            v-model="isAllChecked"
            @change="allCheched"
          >全选</el-checkbox>
          <div style="padding-top:0.1rem">
            <table class="table" cellspacing="0">
              <thead class="thead">
                <tr>
                  <td style="width: 2rem;">校区名称</td>
                  <td style="width: 2rem;">合作类型</td>
                  <td style="width: 4rem;">合作周期</td>
                  <td style="width: 1rem;"></td>
                </tr>
              </thead>
              <tbody class="tbody">
                <tr v-for="item,index in campusList">
                  <td style="width: 2rem;">{{item.name}}</td>
                  <td style="width: 2rem;">{{item.cooperateModeName}}</td>
                  <td style="width: 4rem;" v-if="item.isNoTime">无限期</td>
                  <td style="width: 4rem;" v-else>{{item.serveStartTimeShow}}至{{item.serveEndTimeShow}}</td>
                  <td style="width: 1rem;">
                    <el-checkbox v-model="item.checked" @change="hasChange(item)"></el-checkbox>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="btn_div">
          <div
            v-if="hasApi('toggleRunningStatus') || hasApi('updateOpeningCampus')"
            class="btn_sure"
            @click="sure()"
          >确 认</div>
          <div class="btn_cancel" @click="cancel()">取 消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: false,
      title: "",
      isAllChecked: false, //是否全选
      isHasCampus: false,
      isSearchCampus: false,
      cooperationModeList: [],
      selectCampusList: [], //已选择的校区数据
      hasSelectCampusList: [], //已勾选的校区数据
      campusList: [],
      libraryCourseId: "",
      tabledisplayObj: {
        campusName: "" //校区名
      },
      isHasAdd:false,
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
      vm.hasSelectCampusList = [];
      vm.selectCampusList = [];
      if (data.campusIds.length == 0) {
        vm.title = "课程上架";
        vm.isAdd = true;
        vm.hasSelectCampusList = [];
      } else {
        vm.title = "开课校区";
        vm.isAdd = false;
        vm.hasSelectCampusList = data.campusIds;
      }
      vm.libraryCourseId = data.libraryCourseId;
      vm.initData();
    },
    initData() {
      vm.campusList = [];
      let campustemp = []; //临时存放列表
      vm.isHasCampus = vm.hasSelectCampusList.length != 0;
      api.campusList(vm.tabledisplayObj).then(function(data) {
        if (data.result == "操作成功") {
          campustemp = data.list;
          for (let i = 0; i < campustemp.length; i++) {
            //获取合作期限
            campustemp[i].serveStartTimeShow = campustemp[i].serveStartTime
              ? campustemp[i].serveStartTime.split(" ")[0]
              : "";
            campustemp[i].serveEndTimeShow = campustemp[i].serveEndTime
              ? campustemp[i].serveEndTime.split(" ")[0]
              : "";
            //是否已选择
            campustemp[i].checked = false;
            for (let a = 0; a < vm.hasSelectCampusList.length; a++) {
              if (vm.hasSelectCampusList[a] == campustemp[i].campusId) {
                campustemp[i].checked = true;
                if (!vm.isSearchCampus) {
                  vm.selectCampusList.push(campustemp[i]);
                }
                break;
              }
            }
            //是否为直营
            campustemp[i].isNoTime = campustemp[i].cooperationMode == 2;
            for (let y = 0; y < vm.cooperationModeList.length; y++) {
              if (
                vm.cooperationModeList[y].value == campustemp[i].cooperationMode
              ) {
                campustemp[i].cooperateModeName =
                  vm.cooperationModeList[y].name;
              }
            }
          }
          vm.tabledisplayObj.total = data.totalCount;
          for (let i = 0; i < campustemp.length; i++) {
            if (!campustemp[i].checked) {
              vm.campusList.push(campustemp[i]);
            }
          }
          console.log(vm.campusList);
          // vm.campusList = campustemp;
        }
      });
    },
    /**搜索校区 */
    searchCampus() {
      vm.isSearchCampus = vm.tabledisplayObj.campusName != "";
      vm.selectCampusList =
        vm.tabledisplayObj.campusName != "" ? vm.selectCampusList : [];
      vm.initData();
    },
    /**全选/全部取消选择 */
    allCheched(val) {
      console.log(val);
      if (val) {
        vm.campusList.forEach(item => {
          item.checked = true;
          vm.selectCampusList.push(item);
          vm.hasSelectCampusList.push(item.campusId);
        });
        vm.campusList = [];
        vm.isHasCampus = true;
      } else {
        vm.campusList = vm.selectCampusList;
        vm.selectCampusList = [];
        vm.hasSelectCampusList = [];
        vm.isHasCampus = false;
        vm.campusList.forEach(item => {
          item.checked = false;
        });
      }
    },
    /** 校验是否全选 */
    checkAllSelect() {
      return vm.campusList.length == 0;
    },
    /**校区选择发生改变 */
    hasChange(item) {
      console.log(item.checked);
      item.checked = true;
      vm.selectCampusList.push(item);
      vm.hasSelectCampusList.push(item.campusId);
      vm.isHasCampus = true;
      let index = vm.campusList.indexOf(item);
      //使用splice函数进行移除：
      if (index > -1) {
        vm.campusList.splice(index, 1);
      }
      vm.isAllChecked = vm.checkAllSelect();
    },
    /**已选择校区发生改变 */
    campusGroupChecked(val) {
      console.log(val);
      vm.isAllChecked = false;
      if (!vm.isSearchCampus) {
        vm.selectCampusList = [];
      } else {
        let tempList = [];
        for (let i = 0; i < vm.selectCampusList.length; i++) {
          for (let x = 0; x < val.length; x++) {
            if (val[x] == vm.selectCampusList[i].campusId) {
              tempList.push(vm.selectCampusList[i]);
              break;
            }
          }
        }
        vm.selectCampusList = tempList;
      }
      vm.initData();
    },
    sure: function() {
      if(vm.isHasAdd) return;
      if (vm.hasSelectCampusList.length == 0) {
        this.$message.warning("请选择至少一个校区");
        return;
      }
      vm.isHasAdd = true;
      if (vm.isAdd) {
        let campusIds = vm.hasSelectCampusList;
        var paras = {
          libraryCourseId: vm.libraryCourseId,
          status: 2,
          campusIds: campusIds
        };
        
        api.toggleRunningStatus(paras).then(function(data) {
          console.log(data);
          if (data.resultCode == 2000) {
            vm.$message({
              message: "上架课程成功",
              type: "success"
            });
            
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.isHasAdd = false;
            vm.$message.warning(data.message);
          }
        });
      } else {
        let campusIds = vm.hasSelectCampusList;
        var paras = {
          libraryCourseId: vm.libraryCourseId,
          campusIds: campusIds
        };
        api.updateOpeningCampus(paras).then(function(data) {
          console.log(data);
          if (data.resultCode == 2000) {
            vm.$message({
              message: "选择校区成功",
              type: "success"
            });
            vm.$emit("callback", "添加成功");
            vm.cancel();
          } else {
            vm.isHasAdd = false;
            vm.$message.warning(data.message);
          }
        });
      }
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
        vm.isHasAdd = false;
        vm.hasSelectCampusList = [];
        vm.selectCampusList = [];
        vm.campusList = [];
        vm.isAllChecked = false;
        vm.libraryCourseId = "";
        vm.tabledisplayObj = {
          campusName: "" //校区名
        };
      }, 500);
    }
  },
  created: function() {
    vm = this;
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    vm.cooperationModeList = dicdata["cooperation_mode"];
  }
};
</script>
<style lang="scss">
.newCourseContainer {
  .line_from {
    height: 1px;
    margin: 0.24rem 0.18rem 0.18rem 0.18rem;
    background-color: #f3f6fc;
  }
  .el-form--inline .el-form-item {
    vertical-align: inherit;
  }
  .search_input {
    width: 40%;
    font-size: 0.16rem;
    margin-top: 0.1rem;
  }
  .checkGroup {
    padding: 0.2rem;
  }
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }
  .el-checkbox__inner {
    width: 0.18rem;
    height: 0.18rem;
  }
  .el-checkbox__inner::after {
    height: 0.09rem;
    left: 0.06rem;
    position: absolute;
    top: 0.02rem;
  }
  .el-checkbox {
    margin-top: 0.05rem;
  }
  .tbody {
    display: block;
    height: 3rem;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; // 为了滚动顺畅
  }
  /*滚动条*/
  // .tbody::-webkit-scrollbar {
  //   display: none; // 隐藏滚动条
  // }
  .thead,
  .tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .tbody td {
    height: 0.5rem;
  }
  .thead {
    width: calc(100% - 1em);
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .launch_text {
    color: #999999;
    text-align: left;
    font-size: 0.14rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: #ffffff;
    color: #666666;
    border: 0rem solid #ffffff;
    font-size: 0.16rem;
    padding: 0 0.1rem;
  }
  .el-radio {
    margin-right: 0.1rem;
  }
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
}
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.panel {
  width: 10rem;
}
</style>

